<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="75px"
        >
            <el-form-item label="用户名称" prop="userName">
                <el-input
                    v-model="queryParams.userName"
                    placeholder="请输入用户名称"
                    clearable
                    size="small"
                    style="width: 240px"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list">
            <el-table-column
                label="姓名"
                align="center"
                prop="nickName"
                :show-overflow-tooltip="true"
            />
            <el-table-column label="姓别" align="center" prop="sex">
            </el-table-column>
            <el-table-column label="手机号" align="center" prop="phoneNum">
            </el-table-column>
            <el-table-column label="照片" align="center" prop="photo">
                <template slot-scope="scope">
                    <img
                        class="photo"
                        v-if="scope.row.photo"
                        :src="scope.row.photo"
                        alt=""
                        srcset=""
                    />
                </template>
            </el-table-column>
            <el-table-column
                label="单位/部门"
                align="center"
                prop="deptName"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="应修学时"
                align="center"
                prop="shouldPeriod"
                width="164"
                :formatter="formatDuring"
            />
            <el-table-column
                label="已修学时"
                align="center"
                prop="alreadyPeriod"
                width="110"
                :formatter="formatDuring"
            />
            <el-table-column label="考试成绩" align="center">
                <template slot-scope="scope">
                    {{ scope.row.score == "-1" ? "" : scope.row.score }}
                </template>
            </el-table-column>
            <el-table-column label="考试状态" align="center">
                <template slot-scope="scope">
                    {{
                        scope.row.score == "-1"
                            ? "未考试"
                            : scope.row.examResult === 0
                            ? "不合格"
                            : "合格"
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="150"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="lookDetail(scope.row)"
                        >查看详情</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="getExamDetaile(scope.row)"
                        v-if="scope.row.examResult != '-1'"
                        >答题记录</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <examRecord :queryParams="examRecordParams"></examRecord>
    </div>
</template>
<script>
import { formatDuring } from '@/utils/validate'
import { projectUserRecords } from '@/api/system/train'
import examRecord from '@/components/examRecord'
export default {
    name: 'trainProjectDetail',
    components: {
        examRecord
    },
    data () {
        return {
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // 课程表格数据
            list: [],
            queryParams: {
                "deptId": "",
                "pageNum": 0,
                "pageSize": 10,
                "projectId": "",
                "userId": "",
                "userName": ""
            },
            examRecordParams: {}
        }
    },
    created () {
        this.queryParams.projectId = this.$route.query.projectId
        this.formatDuring = formatDuring
        this.getList()
    },
    methods: {
        /** 搜索按钮操作 */
        handleQuery () {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery () {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        getList () {
            if (this.loading) return false
            this.loading = true;
            projectUserRecords(this.queryParams).then(response => {
                this.list = response.data;
                this.total = response.total;
                this.loading = false;
            });
        },
        lookDetail (row) {
            this.$router.push({
                path: `/educationtrain/trainRecord/tranCourse`,
                query: {
                    projectId: row.projectId,
                    userId: row.userId,
                }
            })
        },
        // lookAnswerHistory (row) {
        //     this.$router.push({
        //         path: `/educationtrain/trainRecord/answerHistory`,
        //         query: {
        //             projectId: row.projectId,
        //             userId: row.userId
        //         }
        //     })
        // },
        getExamDetaile (item) {
            this.examRecordParams = {
                projectId: item.projectId,
                userId: item.userId
            }
        }
    }
}
</script>
<style scoped>
.photo {
    max-width: 40px;
    max-height: 40px;
}
</style>
